﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="System.Collections.Generic" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	测量数据图表类型
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>测量数据图表类型</h2>
    <div style="margin-top:10px">
    <form method="post" action="<%=Url.Content("~/Graph/Index") %>">
        <div>
            <%if ((bool)ViewData["showFactory"])
              {%>
            请选择公司：<%= Html.DropDownList("factoryId", ViewData["factories"] as List<SelectListItem>, "请选择公司", new { style = "width:150px", onchange = "showStacks();" })%>
            <span style="margin-left:20px"></span>
            <%
                }
              else
              {
            %>
            <%=Html.Hidden("factoryId", ViewData["factoryId"]) %>
            <%
              }
            %>
            <%if ((bool)ViewData["showStacks"])
              { %>
            请选择堆场/尾矿库：<span id="stackList"><%= Html.DropDownList("stackId", ViewData["stacksAndTailingponds"] as List<SelectListItem>, "请选择", new { style = "width:150px" })%></span>
            <span style="margin-left:20px"></span>
            <%}
              else
              {    
            %>
            <%=Html.Hidden("stackId", 1) %>
            <%} %>
            图表分类：<%= Html.DropDownList("subGraphType", ViewData["graphTypes"] as List<SelectListItem>, "请选择", new { style = "width:150px" })%>
        </div>
        <div style="margin-top:20px">
            时间范围：
            <span style="margin-left:20px">
                <input type="radio" id="dateType1" name="dateType" checked="checked" value="1" onclick="resetDateType();" />
            </span>
            <select id="predefinedDate" name="predefinedDate" onclick="checkDateType(1);">
                <option value="1">最近2周</option>
                <option value="2" selected="selected">最近1月</option>
                <option value="3">最近3月</option>
                <option value="4">最近6月</option>
                <option value="5">最近1年</option>
            </select>
            
            <span style="margin-left:60px">
                <input type="radio" id="dateType2" name="dateType" value="2" />
            </span>
            从<input type="text" name="dateFrom" id="dateFrom" readonly="readonly" onclick="checkDateType(2);" />到<input type="text" name="dateTo" id="dateTo" readonly="readonly"  onclick="checkDateType(2);" />
            <span style="margin-left:20px"></span>
            <%=Html.Hidden("graphType", (GabageFactory.Controllers.GraphController.GraphType)ViewData["graphType"])%>
            <input type="button" onclick="return validForm();" value="确  定" />
        </div>
    </form>
    </div>

    <div id="chartDiv" style="margin-left:10px;margin-top:200px;text-align:left;">
        <h2 id="chartName"></h2>
        <div id="chartArea"></div>
    </div>

    <script type="text/javascript" language="javascript">
        $('#dateFrom').datepicker({changeMonth: true, changeYear: true});
        $('#dateTo').datepicker({changeMonth: true, changeYear: true});

        $(document).ready(function() {
            showStacks();
        });

            
        function displayChart()
        {
            var url = '<%=Url.Content("~/Graph/Display") %>';
            var factoryId = document.getElementById("factoryId").value;
            var stackId = document.getElementById("stackId").value;
            var graphType = document.getElementById("graphType").value;
            var subGraphType = document.getElementById("subGraphType").value;
            var fromDate = new Date();
            var toDate = new Date();

            if (document.getElementById("dateType1").checked)
            {
                var dateType = document.getElementById("predefinedDate").value;
                switch (dateType) {
                    case "1":
                        fromDate.setDate(toDate.getDate() - 14);
                        break;
                    case "2":
                        fromDate.setDate(toDate.getDate() - 30);
                        break;
                    case "3":
                        fromDate.setDate(toDate.getDate() - 90);
                        break;
                    case "4":
                        fromDate.setDate(toDate.getDate() - 180);
                        break;
                    case "5":
                        fromDate.setDate(toDate.getDate() - 365);
                        break;
                    default:
                        fromDate.setDate(toDate.getDate() - 30);
                        break;
                }

                fromDate = fromDate.getFullYear() + "-" + (fromDate.getMonth() + 1) + "-" + fromDate.getDate();
                toDate = toDate.getFullYear() + "-" + (toDate.getMonth() + 1) + "-" + toDate.getDate();
            }
            else {
                fromDate = document.getElementById("dateFrom").value;
                toDate = document.getElementById("dateTo").value;
            }

            var ranVal = Math.random();
            url += "?factoryId=" + factoryId + "&graphType=" + graphType + "&subGraphType=" + subGraphType;
            url += "&id=" + stackId + "&fromDate=" + fromDate + "&toDate=" + toDate + "&ran=" + ranVal;
            url = encodeURIComponent(url);
            var chart2 = new FusionCharts("../../Scripts/FusionCharts/Charts/MSLine.swf", "ChId1", "800", "600");
            chart2.setDataURL(url);
            chart2.render("chartArea");

            $("#chartName").text($("#subGraphType").find("option:selected").text());
        }

        function checkDateType(dateType)
        {
            document.getElementById("dateType" + dateType).checked = true;
            if (dateType == 1)
            {
                resetDateType();
            }
        }

        function showStacks() {
            <%
            string showType = "0";
            GabageFactory.Controllers.GraphController.GraphType graphType = (GabageFactory.Controllers.GraphController.GraphType)ViewData["graphType"];
            
            if (graphType == GabageFactory.Controllers.GraphController.GraphType.Stack)
            {
                showType = "1";
            }
            else if (graphType == GabageFactory.Controllers.GraphController.GraphType.Tailingpond)
            {
                showType = "2";
            }
            %>
            var factoryId = document.getElementById("factoryId").value;
            if (factoryId == "" || factoryId == 0) return;
            $.ajax({ 
                    type: "POST",
                    url: "<%=Url.Content("~/Modification/ListStacks") %>",
                    data: "factoryId=" + factoryId + "&showType=<%=showType %>",
                    success: function (data) { $("#stackList").html(data);}
            });
        }

        function validForm() {
            var factoryId = document.getElementById("factoryId").value;
            if (factoryId == 0 || factoryId == "" || factoryId == undefined) {
                alert("请选择公司！");
                document.getElementById("factoryId").focus();
                return false;
            }

            <%if ((bool)ViewData["showStacks"]){ %>
            var stackId = document.getElementById("stackId").value;
            if (stackId == 0 || stackId == "" || stackId == undefined) {
                alert("请选择堆场/尾矿库！");
                document.getElementById("stackId").focus();
                return false;
            }
            <%} %>
            
            var graphType = document.getElementById("subGraphType").value;
            if (graphType == 0 || graphType == "" || graphType == undefined) {
                alert("请选择图表分类！");
                document.getElementById("subGraphType").focus();
                return false;
            }

            if (document.getElementById("dateType2").checked && document.getElementById("dateType2").value == 2)
            {
                var dateFrom = document.getElementById("dateFrom").value;
                if (dateFrom == 0 || dateFrom == "" || dateFrom == undefined) {
                    alert("请选择开始日期！");
                    document.getElementById("dateFrom").focus();
                    return false;
                }

                var dateTo = document.getElementById("dateTo").value;
                if (dateTo == 0 || dateTo == "" || dateTo == undefined) {
                    alert("请选择开始日期！");
                    document.getElementById("dateTo").focus();
                    return false;
                }
            }

            displayChart();
        }

        function resetDateType() {
            document.getElementById("dateFrom").value = "";
            document.getElementById("dateTo").value = "";
        }
    </script>


</asp:Content>
